<template>
  <div class="wrap">
    <el-button type="danger" @click="goToPre">返回</el-button>
    <div class="form">
      <div class="input-row">
        <div class="desc">厂商名称:</div>
        <div class="input">
          <el-input placeholder="厂商名称" v-model="name"> </el-input>
        </div>
      </div>
      <div class="input-row">
        <div class="desc">英文名称:</div>
        <div class="input">
          <el-input placeholder="厂商名称" v-model="EnglishName"> </el-input>
        </div>
      </div>
      <div class="icon">
        <div class="desc">厂商商标</div>
        <img :src="'/imgs/logo.png'" alt="" />
      </div>
      <div class="submit-row">
        <el-button type="success" @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Button, Input } from "element-ui";
import { addManufacturer } from "@/api/manufacturer.js";
export default {
  name: "manufacturer-add",
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
  },
  data() {
    return {
      name: null,
      EnglishName: null,
    };
  },
  methods: {
    goToPre() {
      this.$confirm("是否放弃新增?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push({ path: "/backend/manufacturer" });
        })
        .catch(() => {});
    },
    submit() {
      addManufacturer({})
        .then((res) => {})
        .catch((errMsg) => this.$alert(errMsg));
    },
  },
};
</script>
<style lang="stylus" scoped>
.wrap {
  .form {
    border-top: 1px solid #ccc;
    padding-top: 20px;
    margin-top: 10px;

    .input-row {
      margin-bottom: 15px;

      .desc {
        position: absolute;
        width: 100px;
        line-height: 40px;
        text-align: right;
      }

      .input {
        padding-left: 110px;
        width: 500px;
      }
    }
  }
}
</style>